<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>考级音频</title>
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/initialize.css"/>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/midi/css/public.css"/>
		<script src="__PUBLIC__/midi/js/jquery-2.2.3 (1).js" type="text/javascript"></script>
		<script src="__PUBLIC__/midi/js/public.js" type="text/javascript"></script>
	    <style>
	        .footer{
	    		width: 100%;
	    		background-color: #F5F5F8;
	    	}
	    	.footer .con{
	    		width: 1200px;
	    		margin: 0 auto;
	    	}
	    	.footer .footer-item{
	    		display: -webkit-box;
	    		display: -ms-flexbox;
	    		display: -webkit-flex;
	    		display: flex;
	    		padding: 2vh 5.333333vw;
	    		align-items: center;
	    		-webkit-align-items: center;
	    	}
	    	.footer .footer-item img{
	    		margin-right: 5.333333vw;
	    		width: 5vw;
	    		display: block;
	    	}
	    	.footer .footer-item h2{
	    		font-size: 18px;
	    		color: #333;
	    		margin-bottom: 24px;
	    		cursor: pointer;
	    	}
	    	.footer .footer-item p{
	    		font-size: 16px;
	    		color: #999;
	    	}
	    	.footer .con .inner .back-white{
	    		background-color: #fff;
	    	}
	    	.footer .con .inner .back-gray{
	    		background-color: #f1f4f4;
	    	}
	    	@media only screen and (min-width:1201px ) {
	    		.footer{
	    			padding-top: 30px;
	    		}
				.yqkj-mb{
					display: none;
				}
				.wiezhi{
					display: none;
				}
				.banner-mb{
					display: none;
				}
			}
	    </style>
        <style type='text/css'>
	          .pages a,.pages span {
	               display:inline-block;
	               padding:5px 9px;
	               margin:0 1px;
	               border:1px solid #f0f0f0;
	             }
	           .pages a,.pages li {
	                display:inline-block;
	                list-style: none;
	                text-decoration:none; color:#29d0c9;
	             }
	           .pages a.first,.pages a.prev,.pages a.next,.pages a.end{
	                margin:0;
	            }
	          .pages a:hover{
	               border-color:#29d0c9;
	            }
	          .pages span.current{
	               background:#29d0c9;
	               color:#FFF;
	              font-weight:700;
	              border-color:#29d0c9;
	           }
	           .table input,select{
		           border-radius:6px !important;
	            }
	          .pages{
		            display: -webkit-box;
		           display: -ms-flexbox;
		           display: -webkit-flex;
		           display: flex;
		           -webkit-box-pack: center;
		           -ms-flex-pack: center;
		           -webkit-justify-content: center;
		           justify-content: center;
		           -webkit-box-align: center;
		           -ms-flex-align: center;
		            padding: 5% 0;

	            }
          </style>
	</head>
	<body>
		<!--头部导航栏开始-->
		<include file="Public/header" />
		<!--头部导航栏结束-->
		<!--首页第一个轮播图开始-->
		<div class="banner">
	    	<img src="__PUBLIC__/midi/img/s_p2.png" />
	    </div>
		<!--首页第一个轮播图结束-->
		<!--乐器考级-->
		<div class="type-sec">
	    	<div class="type-inner">
	    		<div class="type-item">
	    			<span>电吉他</span>
	    			<div class="down-list">
	    				<ul>
	    					<i class="icon-up"></i>
	    				   <li><a href="__ACTION__?type=1_1">一级</a></li>
	    				   <li><a href="__ACTION__?type=1_2">二级</a></li>
	    				   <li><a href="__ACTION__?type=1_3">三级</a></li>
	    				   <li><a href="__ACTION__?type=1_4">四级</a></li>
	    				   <li><a href="__ACTION__?type=1_5">五级</a></li>
	    				   <li><a href="__ACTION__?type=1_6">六级</a></li>
	    				   <li><a href="__ACTION__?type=1_7">七级</a></li>
	    				   <li><a href="__ACTION__?type=1_8">八级</a></li>
	    				   <li><a href="__ACTION__?type=1_9">九级</a></li>
	    			    </ul>
	    			</div>
	    		</div>
	    		<div class="type-item">
	    			<span>爵士鼓</span>
	    			<div class="down-list">
	    				<ul>
	    					<i class="icon-up"></i>
	    				   <li><a href="__ACTION__?type=2_1">一级</a></li>
	    				   <li><a href="__ACTION__?type=2_2">二级</a></li>
	    				   <li><a href="__ACTION__?type=2_3">三级</a></li>
	    				   <li><a href="__ACTION__?type=2_4">四级</a></li>
	    				   <li><a href="__ACTION__?type=2_5">五级</a></li>
	    				   <li><a href="__ACTION__?type=2_6">六级</a></li>
	    				   <li><a href="__ACTION__?type=2_7">七级</a></li>
	    				   <li><a href="__ACTION__?type=2_8">八级</a></li>
	    				   <li><a href="__ACTION__?type=2_9">九级</a></li>
	    			    </ul>
	    			</div>
	    		</div>
	    		<div class="type-item">
	    			<span>电贝斯</span>
	    			<div class="down-list">
	    				<ul>
	    					<i class="icon-up"></i>
	    				   <li><a href="__ACTION__?type=3_1">一级</a></li>
	    				   <li><a href="__ACTION__?type=3_2">二级</a></li>
	    				   <li><a href="__ACTION__?type=3_3">三级</a></li>
	    				   <li><a href="__ACTION__?type=3_4">四级</a></li>
	    				   <li><a href="__ACTION__?type=3_5">五级</a></li>
	    				   <li><a href="__ACTION__?type=3_6">六级</a></li>
	    				   <li><a href="__ACTION__?type=3_7">七级</a></li>
	    				   <li><a href="__ACTION__?type=3_8">八级</a></li>
	    				   <li><a href="__ACTION__?type=3_9">九级</a></li>
	    			    </ul>
	    			</div>
	    		</div>
	    	</div>
	    </div>
		
		<!--乐器考级结束-->
		<!--音频-->
		<div class="footer">
			<div class="con">
				<div class="inner">
					<foreach name="audio_arr" item="v">
						<div class="footer-item back-white" onclick="window.location.href='__CONTROLLER__/audio_details/id/{$v.audio_id}'">
						<img src="__PUBLIC__/midi/caidan-img/bofanganniu.png" />
						<div>
							<h2>{$v.audio_name}</h2>
							<p>{$v.audio_introduction}</p>
						</div>
					</div>
					</foreach>
					<div class="pages" >{$page}</div>
				</div>
			</div>
		</div>
		<!--音频结束-->
		<!--曲谱教程页的主要内容结束-->
	    <script>
	    	$(function(){
                 $(".right-item").on("click",function(){
      	                var $div = $(this).find($(".right-item-bottom"));
                       if($div.is (":hidden")){
       	                    $(this).siblings().find($(".right-item-bottom")).hide();
       	                    $(this).siblings().removeClass("select");
       	                    $(this).siblings().find("img").attr('src','__PUBLIC__/midi/caidan-img/xialajiantou.png');
       	                    $(this).addClass("select");
       	                    $(this).find("img").attr('src','__PUBLIC__/midi/caidan-img/xialajiantou-2.png');
                            $(".yqkj .con").css({
    			    	            'padding-bottom':'96px',
	    	                   })
       	                    $div.show();
                     }else{
       	                 $(".yqkj .con").css({
	    			              'padding-bottom':'26px',
    	                 })
       	                $(this).find("img").attr('src','__PUBLIC__/midi/caidan-img/xialajiantou.png');
                    	$div.hide();
                     }
                   })
                 $(".right-item-bottom ul li").hover(function(){
      	                $(this).css({
      		                  'background-color':'#29d0c9',
      		                  'color':'#fff'
      	                     })
                  },function(){
      	                 $(this).css({
      		                  'background-color':'#fff',
      		                    'color':'#333'
      	                   })
                    })
                $(".footer-item:even").addClass("back-white");
                $(".footer-item:odd").addClass("back-gray");

	    	})
	    </script>
	</body>
</html>
